<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1920" height="1000"></canvas>
</body>
<script>
    var oMyCanvas=document.getElementById('canvas');

    if (oMyCanvas && oMyCanvas.getContext) {
        // 转换为 2D 图形对象；
        var context = oMyCanvas.getContext("2d");

        if (context) {
            // 第一条曲线
            // 起点坐标
            context.moveTo(50, 10);


            context.bezierCurveTo(
                // cp1x cp1y    // 起点 - 控制器坐标
                50, 60,
                // cp2x cp2y    // 结束点 - 控制器坐标
                150, 60,
                // x y          // 结束点坐标
                150, 10,
            );
            context.bezierCurveTo(150, 60, 300, 60, 300, 10);
            context.stroke();


            // 线色
            context.strokeStyle = 'rgb(250,0,0)';
            // 蓝色
            context.fillStyle   = '#00f';

            context.beginPath();
            context.moveTo(50, 10);
            context.lineTo(50, 60);
            context.stroke();

            context.beginPath();
            context.moveTo(150, 10);
            context.lineTo(150, 60);
            context.stroke();

            context.beginPath();
            context.moveTo(300, 10);
            context.lineTo(300, 60);
            context.stroke();


            context.fillRect(50 - 5, 10 - 5, 10, 10);
            context.fillRect(50 - 5, 60 - 5, 10, 10);
            context.fillRect(150 - 5, 10 - 5, 10, 10);
            context.fillRect(150 - 5, 60 - 5, 10, 10);
            context.fillRect(300 - 5, 10 - 5, 10, 10);
            context.fillRect(300 - 5, 60 - 5, 10, 10);
        }
    }

    const data = [
        {
            coordinate: { x: 50, y: 50 },
            controlStart: { x: 150, y: 50 },
            controlEnd: { x: 150, y: 0 },
        },
        {
            coordinate: { x: 150, y: 50 },
            controlStart: { x: 300, y: 50 },
            controlEnd: { x: 300, y: 0 },
        },
    ]


</script>
</html>
